<template>
  <div :class="['header-tab-page',isCenter?'center-header-tab-page':'']" >
    <el-menu :default-active="activeIndex" ref="menu" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <template v-for="(menu,index) in menus">
        <el-menu-item v-if="!menu.children" :key="index" :index="menu.title">{{menu.title}}</el-menu-item>
        <el-submenu v-else :index="menu.title" :key="index">
          <template slot="title">{{menu.title}}</template>
          <el-menu-item :index="item.title" :key="index1" v-for="(item,index1) in menu.children">{{item.title}}</el-menu-item>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
import store from '../../store'
export default {
  data () {
    return {
      activeIndex: '',
      menus: [],
      isCenter: null
    }
  },
  methods: {
    handleSelect (index, indexPath) {
      this.$router.push({
        query: { tab: index }
      })
    }
  },
  watch: {
    $route: {
      handler (route) {
        this.menus = route.meta.tab || []
        this.isCenter = route.meta.isCenter
        this.$nextTick(() => {
          if (route.query.tab) {
            const findTab = this.menus.filter(item => item.title === route.query.tab)
            if (findTab.length) {
              this.$refs.menu.activeIndex = route.query.tab
              store.dispatch('permission/generateTabTag', findTab[0] ? findTab[0].tag : '')
            } else {
              this.$router.push({
                query: {}
              })
            }
          } else {
            if (route.meta.tab && route.meta.tab.length) {
              this.$refs.menu.activeIndex = route.meta.tab[0].title
            } else {
              this.$refs.menu.activeIndex = ''
            }
            store.dispatch('permission/generateTabTag', this.menus[0] ? this.menus[0].tag : '')
          }
        })
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.header-tab-page {
  display: inline-block;
  padding-top: 14px;
  margin-left: 20px;
  line-height: 46px;
  height: 46px;

  .el-menu{
    background: transparent;
    &.el-menu--horizontal {
      border-bottom: none;
      .el-submenu {
        /deep/ .el-submenu__title {
          height: 46px;
          line-height: 46px;
          padding:0;
          font-size: 16px;
          color: #fff;
        }
        &.is-active {
          /deep/ .el-submenu__title{
            border-bottom: none;
          }
        }
      }
    }
    .el-menu-item, .el-submenu{
      color: #fff;
      font-weight: bold;
      height: 46px;
      font-size: 16px;
      line-height: 46px;
      margin-right: 60px;
      border-bottom: none;
      padding: 0 30px;
      &.is-active{
        border-bottom: none;
      }
    }

    .el-menu-item.is-active, .el-submenu.is-active,
    .el-menu-item:hover, .el-submenu:hover {
      color: rgba(26, 37, 60, 1);
      background: #f0f2f5;
      position: relative;
      text-align: center;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      cursor: pointer;
      /deep/ .el-submenu__title {
        color: rgba(26, 37, 60, 1);
      }
    }

    .el-menu-item.is-active, .el-submenu.is-active {
      &::before{
        content: '';
        position: absolute;
        bottom: 0;
        left: -10px;
        width: 10px;
        height: 10px;
        background: radial-gradient(circle at top left,
         transparent 10px, #f0f2f5 0) top left,
      }

      &::after{
        content: '';
        position: absolute;
        bottom: 0;
        right: -10px;
        width: 10px;
        height: 10px;
        background:
         radial-gradient(circle at top right,
         transparent 10px, #f0f2f5 0) top right,
      }
    }
  }
}
.center-header-tab-page {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  .el-menu{
    .el-menu-item{
      margin-right: 0;
    }
  }
}
</style>
